<template>
	<view class="container">
		<!-- 消息列表容器 -->
		<view class="info">
			<!-- 初始加载动画 -->
			<view v-if="initialLoading" class="initial-loading">
				<loading-indicator color="#3284fc" />
				<text class="loading-text">加载中...</text>
			</view>
			
			<!-- 使用页面滚动，由页面生命周期 onReachBottom 统一处理触底加载 -->
			<view v-else class="message-list">
				
				<!-- 有消息时显示消息列表 -->
				<view v-if="messageList.length > 0">
					<!-- 
						v-for: 循环渲染消息列表
						每条消息包含标题、时间和内容 
					-->
					<view v-for="(item, index) in messageList" :key="index" class="message-item">
						<!-- 消息头部：标题和时间 -->
						<view class="message-header">
							<text class="message-title">{{ item.title }}</text>
							<text class="message-time">{{ item.createTime }}</text>
						</view>
						<!-- 消息内容 -->
						<view class="message-content">
							<text>{{ item.content }}</text>
						</view>
					</view>
					
					<!-- 加载更多时的提示 -->
					<view v-if="loading" class="loading-more">
						<loading-indicator color="#999999" />
						<text class="loading-more-text">加载中...</text>
					</view>

					<!-- 没有更多数据时的提示 -->
					<view v-if="noMore" class="no-more">
						<text>没有更多消息了</text>
					</view>
				</view>

				<!-- 无消息时的空状态显示（只在初始加载完成且无数据时显示） -->
				<view v-else class="empty-state">
					<text class="empty-text">暂时没有消息！</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			messageList: [], // 消息列表数组
			page: 1, // 当前页码，用于分页加载
			pageSize: 30, // 每页显示的消息数量
			loading: false, // 是否正在加载更多数据
			initialLoading: true, // 是否正在初始加载
			noMore: false, // 是否没有更多数据可加载
			userId: 'user123' // 当前用户ID（暂时使用假数据）
		}
	},
	
	// 页面加载时执行
	onLoad(options) {
		// 获取用户ID，可以从页面参数或本地存储获取
		this.userId = options.userId || uni.getStorageSync('userId') || 'user123';
		// 初始化加载消息列表
		this.getMessageList();
	},
	
	// 页面触底事件（页面滚动生效）
	onReachBottom() {
		this.loadMore();
	},
	
	// 页面隐藏/退出时重置数据
	onHide() {
		this.resetData();
	},
	
	onUnload() {
		this.resetData();
	},
	
	methods: {
		// 获取消息列表数据（目前使用假数据模拟）
		getMessageList(isLoadMore = false) {
			// 防止重复请求
			if (this.loading || (this.initialLoading && isLoadMore)) return Promise.resolve();
			
			// 设置加载状态
			if (isLoadMore) {
				this.loading = true;
			}
			
			// 模拟网络请求延迟，返回 Promise 便于链式处理
			return new Promise((resolve) => {
				setTimeout(() => {
					// 生成假数据
					const mockMessages = this.generateMockData();
					
					if (isLoadMore) {
						// 如果是加载更多，将新数据追加到现有列表
						this.messageList = [...this.messageList, ...mockMessages];
					} else {
						// 如果是首次加载，直接替换列表
						this.messageList = mockMessages;
					}
					
					// 模拟没有更多数据的情况（当页码大于3时）
					if (this.page >= 3) {
						this.noMore = true;
					}
					
					// 重置加载状态
					this.loading = false;
					this.initialLoading = false;
					
					resolve();
				}, isLoadMore ? 1000 : 1500); // 初始加载稍长一些，加载更多1秒
			});
		},
		
		// 生成模拟数据
		generateMockData() {
			// 模拟10%的概率返回空数据（用于测试空状态）
			// 实际使用时可以删除这个判断
			if (this.page === 1 && Math.random() < 0.1) {
				return [];
			}
			
			const messageTypes = [
				{ title: '支付成功通知', content: '您已成功支付56.9元' },
				{ title: '订单状态更新', content: '您的订单已发货，预计3天内到达' },
				{ title: '优惠券到账', content: '恭喜您获得10元优惠券，有效期30天' },
				{ title: '活动通知', content: '新用户专享活动开始，立即参与享受优惠' },
				{ title: '系统消息', content: '系统将于今晚2:00-4:00进行维护升级' },
				{ title: '支付成功通知', content: '您已成功支付56.9元' },
				{ title: '订单状态更新', content: '您的订单已发货，预计3天内到达' },
				{ title: '优惠券到账', content: '恭喜您获得10元优惠券，有效期30天' },
				{ title: '活动通知', content: '新用户专享活动开始，立即参与享受优惠' },
				{ title: '系统消息', content: '系统将于今晚2:00-4:00进行维护升级' },
				{ title: '支付成功通知', content: '您已成功支付56.9元' },
				{ title: '订单状态更新', content: '您的订单已发货，预计3天内到达' },
				{ title: '优惠券到账', content: '恭喜您获得10元优惠券，有效期30天' },
				{ title: '活动通知', content: '新用户专享活动开始，立即参与享受优惠' },
				{ title: '系统消息', content: '系统将于今晚2:00-4:00进行维护升级' },
				{ title: '支付成功通知', content: '您已成功支付56.9元' },
				{ title: '订单状态更新', content: '您的订单已发货，预计3天内到达' },
				{ title: '优惠券到账', content: '恭喜您获得10元优惠券，有效期30天' },
				{ title: '活动通知', content: '新用户专享活动开始，立即参与享受优惠' },
				{ title: '系统消息', content: '系统将于今晚2:00-4:00进行维护升级' }
			];
			
			const messages = [];
			const currentTime = new Date();
			
			// 根据当前页码生成不同的消息
			for (let i = 0; i < this.pageSize; i++) {
				const randomType = messageTypes[Math.floor(Math.random() * messageTypes.length)];
				const messageTime = new Date(currentTime.getTime() - (this.page - 1) * this.pageSize * 3600000 - i * 3600000);
				
				messages.push({
					title: randomType.title,
					content: randomType.content,
					createTime: this.formatTime(messageTime)
				});
			}
			
			return messages;
		},
		
		// 格式化时间显示
		formatTime(date) {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			return `${year}.${month}.${day} ${hours}:${minutes}`;
		},
		
		// 触底加载更多数据
		loadMore() {
			// 如果没有更多数据或正在加载，则不执行
			if (this.noMore || this.loading) return;
			
			// 页码加1，获取下一页数据
			this.page++;
			this.getMessageList(true);
		},
		
		// 重置数据状态
		resetData() {
			this.messageList = [];
			this.page = 1;
			this.loading = false;
			this.initialLoading = true;
			this.noMore = false;
		}
	}
}
</script>

<style>
.container {
	background: linear-gradient(to bottom, #3284fc 50%, #f5f5f5 50%);
	height: 40vh;
	padding: 10rpx 20rpx;
	box-sizing: border-box;
}

.info {
	margin-top: 30rpx;
	margin-bottom: 30rpx; /* 添加底部外边距 */
	background: #ffffff;
	border-radius: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	padding: 20rpx;
	overflow: hidden;
	/* 移除固定高度，让内容撑开容器 */
	min-height: calc(100vh - 120rpx); /* 减去上下边距和padding的高度 */
}

.message-list {
	height: 100%;
}

.message-item {
	padding: 30rpx 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
	background: #ffffff;
}

.message-item:last-child {
	border-bottom: none;
}

.message-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.message-title {
	font-size: 30rpx;
	font-weight: 500;
	color: #333333;
}

.message-time {
	font-size: 24rpx;
	color: #999999;
}

.message-content {
	font-size: 26rpx;
	color: #666666;
	line-height: 1.5;
}

.empty-state {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400rpx;
}

.empty-text {
	font-size: 30rpx;
	color: #999999;
}

.loading-more {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30rpx 0;
}

.loading-more text {
	font-size: 28rpx;
	color: #999999;
}

.no-more {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30rpx 0;
}

.no-more text {
	font-size: 28rpx;
	color: #cccccc;
}

/* 初始加载动画样式 */
.initial-loading {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 400rpx;
	min-height: calc(100vh - 200rpx);
}

.loading-text {
	margin-top: 30rpx;
	font-size: 32rpx;
	color: #3284fc;
}

/* 加载更多时的样式调整 */
.loading-more {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 30rpx 0;
}

.loading-more-text {
	margin-left: 20rpx;
	font-size: 28rpx;
	color: #999999;
}
</style>
